<template>
  <div class="app-container">
    <!-- 管家新增 -->
    <h5 class="titleInfo">
      管家新增
    </h5>
    <el-form ref="form"  :rules="rules" :inline="true" :model="form" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="管家姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址" prop="areas">
            <el-cascader placeholder="请选择省市" :options="options" v-model="form.areas">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="分公司" prop="officeId">
            <el-select placeholder="请选择" v-model="form.officeId">
              <el-option v-for="item in officeOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="管家手机号" prop="username">
            <el-input v-model="form.username" autocompleted="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="密码" prop="password">
            <el-input :type="passw" v-model="form.password" autocomplete="new-password">
              <i slot="suffix" :class="icon" @click="showPass"></i>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button style="margin-top:30px;margin-left:130px" type="primary" @click="submitFn('form')">立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { createButler } from "@/api/stewardItem";
import { companyList } from "@/api/branchOfficeDropDown";
import { regionDropDown } from "@/api/area";
export default {
  name: "stewardItemAdd",
  data() {
    return {
      passw: "password",
      icon: "el-input__icon el-icon-view",
      officeOption: [],
      options: [],
      form: {
        areas: [],
        provinceId: null,
        cityId: null,
        username: "",
        password: ""
      },
      rules: {
        name: [{ required: true, message: "请输入管家姓名", trigger: "blur" }],
        areas: [{ required: true, message: "请选择省市", trigger: "blur" }],
        officeId: [
          { required: true, message: "请选择分公司", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入管家手机号", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  inject: ["reload"],
  mounted() {
    this.getOption();
  },
  updated(){
    // this.form.username = ""
    // this.form.password = ""
    // this.$refs.form.resetFields()
  },
  methods: {
    //密码的隐藏和显示
    showPass() {
      //点击图标是密码隐藏或显示
      if (this.passw == "text") {
        this.passw = "password";
        //更换图标
        this.icon = "el-input__icon el-icon-view";
      } else {
        this.passw = "text";
        this.icon = "el-input__icon el-icon-remove";
      }
    },
    //获取列表
    getOption(){
        //分公司列表
        companyList().then(res =>{
            let resData = res.data.data
            let newData = [];
            resData.forEach(e => {
                newData.push({
                    value:e.id,
                    label:e.name
                })
            });
            this.officeOption = newData
        })
        .catch(error =>{
            this.$message.error(error);
        })
        // 省市列表
        regionDropDown().then(res=>{
            let newArr=[]
            res.data.data.forEach((item1,index) => {
                newArr.push({
                    value: item1.id,
                    label: item1.name,
                })
                if(item1.children!=null){
                    newArr[index]["children"] = []
                    item1.children.forEach((item2) => {
                        newArr[index]["children"].push({
                            value: item2.id,
                            label: item2.name,
                        })
                    })
                }
            });
            this.options = newArr
        })
    },
    // 提交
    submitFn(e) {
      // console.log(this.form)
      this.$refs[e].validate(valid => {
        if (valid) {
          this.form.province = this.form.areas[0];
          this.form.city = this.form.areas[1];
          // console.log(this.form)
          let datas = this.form;
          createButler(datas)
            .then()
            .then(res => {
              if (!res.data.code) {
                this.$message({
                  message: "新增成功",
                  type: "success"
                });
                this.$router.push("/stewardItemIndex");
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(error => {
              this.$message.error(error);
            });
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "warning"
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
</style>